<template>
    <el-scrollbar height="100vh" @scroll="toscroll" ref="scrollbarRef">

        <nav class="header">
            <router-link class="header_L" to="/">
                <img :src="bgurl" alt="显示不处理" class="header_L_bg">
                <div style="color:rgb(110, 72, 47)  ">Chzky's Blog</div>
            </router-link>
            <div class="header_R ">
                <router-link v-for="item in Link " :key="item.title" :to="item.path" class="header_L_Info">
                    <img :src="item.url" alt="显示不处理" class="header_R_bg">
                    <div :class="item.path == route.path ? 'hight_Line' : 'normal_Line'">{{ item.title }}</div>
                </router-link>
            </div>
        </nav>
        <!-- Flag -->

        <div style="min-height: calc(100vh - 3.75rem)">
            <!-- 用slot -->
            <router-view v-slot="{ Component, route }">
                <transition :enter-active-class="route.meta.enter_animation as string || undefined"
                    :leave-active-class="route.meta.leave_animation as string || undefined">

                    <component :is="Component" :key="route.path" class="component" />

                </transition>
            </router-view>
            <UpTop sty="bottom: 2rem;left:2rem">
            </UpTop>
        </div>

        <!-- Flag -->

        <footer class="footer">

        </footer>

    </el-scrollbar>
</template>

<!------------------------------>

<script setup lang="ts">
import UpTop from '../components/top.vue'
import bgurl from '../assets/img/header_left_bg.png?url'
import indexurl from '../assets/svg/index.svg?url'
import searchurl from '../assets/svg/search.svg?url'
import articleurl from '../assets/svg/blog.svg'
import timestampurl from '../assets/svg/timestamp.svg'
import abouturl from '../assets/svg/about.svg'
import Bus from '../hooks/bus'
const route = useRoute()

//Flag:事件总线实现兄弟传参
let scrollbarRef = ref()
const toscroll = (data: any) => {
    Bus.emit('getScroll', (data.scrollTop as number), scrollbarRef)
}

Bus.on('toScroll', (top: number, REE: any) => {
    REE.value.setScrollTop(top)
})


//Flag:链接图标内容
let Link = ref<any>([
    {
        url: indexurl,
        title: '主页',
        path: '/index',
    },
    {
        url: searchurl,
        title: '搜索',
        path: '/search'
    },
    {
        url: articleurl,
        title: '博客',
        path: '/article'
    },
    {
        url: timestampurl,
        title: '历史',
        path: '/timestamp'
    },
    {
        url: abouturl,
        title: '关于',
        path: '/about'
    }

])




</script>

<!------------------------------>

<style scoped lang="scss">
.component {
    //使用定位占满父标签 ;只要知道固定高度是多少就行
    min-height: calc(100vh - 3.75rem);
}

.hight_Line {
    color: rgb(110, 72, 47);
    font-weight: 750;
    font-size: 1.1rem;
    font-family: 'SimHei';

}

.normal_Line {
    // font-family: 'SimSun';
    font-weight: 500;

}


.header {
    // position:fixed;
    // z-index: 999  ;
    top: 0;
    width: 100vw;
    height: 3.75rem
        /* 60px -> 3.75rem */
    ;
    padding-left: 5.9375rem
        /* 95px -> 5.9375rem */
    ;
    padding-right: 5.9375rem
        /* 95px -> 5.9375rem */
    ;
    display: flex;
    justify-content: space-between;

    .header_L {
        font-size: 1.66rem;
        font-weight: 700;
        height: 100%;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: black;
        transition: all .4s;

        .header_L_bg {
            transition: all .4s;
            width: 2.5rem;
            height: 2.5rem;
            margin-right: 1rem;
        }
    }

    .header_L:hover {
        font-size: 1.9rem;

        .header_L_bg {
            width: 2.8rem;
            height: 2.8rem;
        }
    }

    .header_R {

        display: inline-block;
        margin-right: 1rem;
        height: 100%;
        display: flex;
        color: black;

        .header_R_bg {
            display: inline-block;
            width: 2rem;
            height: 2rem;
        }

        .header_L_Info {
            padding: 0;
            margin-right: 2rem;
            text-decoration: none;
            color: black;
            font-size: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 4.3rem;
        }
    }
}

.footer {
    position: absolute;
    bottom: 0;
}
</style>